<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="card-header">
        <span class="title">查看潜在商品验收标准</span>
				<div class="btn-wrap">
          <el-button
            size="middle"
            type="text"
            @click="$router.go(-1)"
            >返回</el-button
          >
        </div>
      </div>
      <div>
        <Umy-table
          :loading="tableLoading"
          :data-source="baseTableData"
          :columns="tableColumns"
          :tableHeight="500"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import UmyTable from '@/components/UmyTable';
import {
  queryStandardDetailBySkuNoService,
} from '@api/commodity/temporaryPurchasingGoods/acceptanceStandard'

export default {
  components: {
    UmyTable,
  },
  data () {
    return {
      tableLoading: false,
      baseTableData: [], // 列表的数据源
      tableColumns: [],
    };
  },
  created () {
    const { skuNo } = this.$route.query;
    this.initTabaleClonum();
    this.getTableDataBySkuNo(skuNo);
  },
  methods: {
    async getTableDataBySkuNo (skuNo) {
      const res = await queryStandardDetailBySkuNoService(
        { skuNo },
        state => { this.tableLoading = state }
      )
      if (res) {
        const { retData } = res;
        this.handleFormatTableData(retData);
      }
    },
    initTabaleClonum () {
      this.tableColumns = [
        {
          title: '品类',
          key: 'categoryPath'
        },
        {
          title: 'SPU编码',
          key: 'spuNo',
          width: 90
        },
        {
          title: 'SKU编码',
          key: 'skuNo',
          width: 90
        },
        {
          title: '商品名称',
          key: 'productName'
        },
        {
          title: '规格',
          key: 'specDetail'
        },
        {
          title: '品牌',
          key: 'brandName'
        },
        {
          title: '验收频率',
          key: 'checkFrequency',
          required: true,
        },
        {
          title: '验收时间',
          required: true,
          key: 'checkTime',
        }
      ];
    },
    handleFormatTableData (reData) {
      this.baseTableData = [];
      this.tableColumns = [];
      this.initTabaleClonum();
      [reData].forEach((element, oneIndex) => {
        // 准备一行数据的普通列
        let curRow = {
          categoryPath: element.categoryPath,
          categoryUuid: element.categoryUuid,
          spuNo: element.spuNo,
          skuNo: element.skuNo,
          productUuid: element.productUuid,
          productName: element.productName,
          brandName: element.brandName,
          specDetail: element.specDetail,
          checkTime: element.checkTime,
          checkTimeUpdate: element.checkTimeUpdate,
          checkFrequency: element.checkFrequency,
          checkFrequencyUpdate: element.checkFrequencyUpdate,
          detailVoList: element.detailVoList
        };
        // 新建表头。并准备一行数据的动态列
        element.detailVoList.forEach((item, index) => {
          this.pushItem(oneIndex, curRow, item, index);
        });
        // 将行，添加到展示列表
        this.baseTableData.push(curRow);
      });
    },
    pushItem (oneIndex, curRow, innerEle, index) {
      curRow['checkCount' + index] = innerEle.checkCount;
      // 标准值
      curRow['standardValue' + index] = innerEle.standardValue;
      // 上差值
      curRow['upDiffValue' + index] = innerEle.upDiffValue;
      // 下差值
      curRow['downDiffValue' + index] = innerEle.downDiffValue;
      // 验收方法
      curRow['checkMethod' + index] = innerEle.checkMethod;
      // 1数字5个列可填，2文本3个列可填
      curRow['checkItemType' + index] = innerEle.checkItemType;
      // 表头，遍历第1行的动态列时，才追加到表头
      if (oneIndex === 0) {
        if (innerEle.checkItemType !== '2') {
          this.tableColumns.push({
            title: innerEle.checkItemName,
            required: innerEle.isNeed === '1',
            key: innerEle.checkItemUuid,
            width: 150,
            align: 'center',
            children: [
              {
                title: '验收次数',
                align: 'center',
                key: 'checkCount' + index
              },
              {
                title: '标准值',
                align: 'center',
                key: 'standardValue' + index
              },
              {
                title: '上差值',
                align: 'center',
                key: 'upDiffValue' + index
              },
              {
                title: '下差值',
                align: 'center',
                key: 'downDiffValue' + index
              },
              {
                title: '验收方法',
                align: 'center',
                key: 'checkMethod' + index
              },
            ]
          });
        } else {
          this.tableColumns.push({
            title: innerEle.checkItemName,
            required: innerEle.isNeed === '1',
            key: innerEle.checkItemUuid,
            width: 150,
            align: 'center',
            children: [
              {
                title: '验收次数',
                align: 'center',
                key: 'checkCount' + index
              },
              {
                title: '标准值',
                align: 'center',
                key: 'standardValue' + index
              },
              {
                title: '验收方法',
                align: 'center',
                key: 'checkMethod' + index
              },
            ]
          });
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.btn-wrap {
  float: right;
  .import-file {
    display: inline;
  }
}
.card-header {
  .title {
    font-size: 16px;
  }
}
</style>
